<template>
  <div class="container">
    <div class="left">
      <div class="box">
        <h1>Weblog 博客登录</h1>
        <img
          src="http://47.104.167.34:9110/assets/login-logo-57e339e7.png"
          alt=""
        />
      </div>
    </div>
    <div class="right">
      <div class="box">
        <h2>欢迎回来</h2>
        <p class="box_p">
          <span class="hr"></span>
          <span>账号密码登录</span>
          <span class="hr"></span>
        </p>
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="userName">
              <el-input v-model="ruleForm.userName" placeholder="请输入用户名">
                <i slot="prefix" class="el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="passWord">
              <el-input v-model="ruleForm.passWord" placeholder="请输入密码">
                <i slot="prefix" class="el-icon-lock"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" round
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.$router.push("/home")
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.container ::v-deep {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  .left {
    width: 1024px;
    height: 100%;
    background-color: #001428;
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      h1 {
        color: #fff;
      }
      img {
        width: 450px;
        height: 450px;
      }
    }
  }
  .right {
    width: calc(100% - 1024px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .box .form {
      .el-form-item {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
    }
    .box_p {
      padding: 20px 0px 20px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      span:nth-child(2) {
        padding: 0px 10px 0px 10px;
        color: #aaa;
      }
      .hr {
        display: block;
        width: 100px;
        height: 1px;
        background-color: #aaa;
      }
    }
  }
}
</style>
